import { Card } from 'antd';
import React from 'react';
import Link from 'components/ZLink'
import DomData from './DomData';
const tabList = [
    {
        key: 'DomData',
        tab: '为Dom添加数据'
    },
    {
        key: 'DomListener',
        tab: '事件监听'
    }
]
export default () => {
    const [activeKey, setActiveKey] = React.useState('DomData')
    
    const tabComponentList: any = {
       DomData: <DomData />
    }
    return (
        <div>
            <Card title="相关链接">
                <Link href="https://www.yuque.com/wangpingan/cute-frontend/hk2q5h" label="你不知道的 WeakMap"></Link>
                <Link href="https://blog.csdn.net/justloveyou_/article/details/71216049" label="图解Java垃圾回收机制"></Link>
                <Link href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Memory_Management" label="MDN内存管理"></Link>
            </Card>
            <Card title="注意事项">
                <h3>Map 和 WeakMap 主要区别</h3>
                <p>Map  对象的键可以是任何类型，但 WeakMap  对象中的键只能是对象引用（ null 除外）；</p>
                <p>WeakMap  不能包含无引用的对象，否则会被自动清除出集合（垃圾回收机制）；</p>
                <p>WeakMap  对象没有 size 属性，是不可枚举的，无法获取集合的大小。</p>
            </Card>
            <Card
                tabList={tabList}
                activeTabKey={activeKey}
                onTabChange={key => setActiveKey(key)}
            >
                {tabComponentList[activeKey]}
            </Card>
        </div>
    )
}